<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式\尺寸操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素样式操作：针对css样式属性和属性值
		 css()        功能：添加任何样式下的属性和是属性值
		               1个参：获取匹配集合元素中第一个元素的css属性值
					   2个参：设置匹配集合元素中所有元素的属性和属性值
					   n个参：多层设置匹配集合元素中所有元素的属性和属性值
					    语法糖：css({"属性":"属性值","属性":"属性值"})
					   .btn{
						   border:1px solid red;
					   }
					   
		 height()和width()  功能：匹配集合元素中第一个元素的高度和宽度值
		                    无参：获取匹配集合元素中第一个元素的高度和宽度值
							有参：设置匹配集合元素中第一个元素的高度和宽度值
		 
		 
		 outHeight()和outWidth()
		                     功能：元素的宽高度				
							 无参：获取元素的宽高度，包含内边距和边框
							 有参：只允许传bool值 ，true：外加一个外边距
		 -->
		 
		 <style>
			.box{
				background-color: aquamarine;
				border: 5px solid pink;
				margin: 20px;
				padding: 20px;
			} 
			.result{
				margin-top: 10px;
				font-weight: bold;
			}
		
			 
		 </style>
	</head>
	<body>
	    <!-- .box添加样式属性：背景颜色，内外边距：20px ,边框5个像素 
		     .result添加样式属性：上外边距：10px,字体加粗
			 jq框架引入
		-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn"> 获取背景颜色 </button>
		<button id="setColorBtn"> 设置背景颜色 </button>
		<button id="setBtn"> 设置多层效果 </button>
		<button id="getwidthBtn"> 获取元素宽度 </button>
		<button id="gbpBtn"> 获取元素高度【包含：内边距+边框】</button>
		<button id="bpmBtn"> 获取元素高度【包含：内边距+边框+外边距】</button>
		
		<!-- 2.显示效果提示区 -->
		<div id="result" class="result">
			宋颖欣=狗蛋儿
		</div>
		<script>
			/*1.点击获取背景颜色的按钮 获取背景颜色值*/
			$("#getColorBtn").click(function(){
				//传一个参 jp css("属性名") 获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区--提示：获取颜色属性值是？
				$("#result").text("获取背景颜色值是:"+bgColor);
			});
			
			/*2.点击 设置背景颜色 按钮 设置背景颜色值*/
			$("#setColorBtn").click(function(){
			 //.box 添加颜色  橙色
			 $(".box").css("background-color","orange");
			 //#result 添加文本：效果修改为橙色
			 $("#result").text("效果已经修改为橙色");
			 
			});
			
			/*3.点击 设置多层效果  按钮  设置效果如下：背景色、倒角、盒子阴影。。。*/
			$("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../img/小狗03.gif)",
				               "border-radius":"50%",
							   "box-shadow":"5px 5px 15px #7e9cff",
							   "width":"300px",
							   "height":"300px",
							   "background-size":"100% 100%"
							   
							   
							   });
			});
		
		    /*4. 点击 获取元素宽度 按钮  获取当前元素的宽高度*/
			$("#getwidthBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取宽度是:"+w+"px");
			});
			
			/*5. 点击 获取元素高度【...】  按钮 算高度是？*/
			$("#gbpBtn").click(function(){
				var gbp=$(".box").outerHeight();
				$("#result").text("获取高度是:"+gbp+"px");
			});
		
		    /*6. 点击  获取元素高度【...】   按钮    传参bool */
		    $("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("获取高度是:"+bpm+"px");
			});
		
		
		</script>
	</body>
</html>